<template>
<div>
<slider :slides="slides" :announcement="announcement"></slider>
<list :books="book01"  heading="最近更新"   @select="preview($event)"></list>
    <list :books="book02"  heading="编辑推荐" @select="preview($event)"></list>
    <modal-dialog ref="dialog">
        <div slot="heading"></div>
        <div>
            <div v-if="selected">
                <h2>{{ selected.title }}</h2>
            </div>
        </div>
    </modal-dialog>
</div>
</template>

<script type="text/ecmascript-6">
import slider from "./components/slider.vue"
import list from "./list.vue"
import ModalDialog from "./components/dialog.vue"


export default{
    components: {slider,list,ModalDialog},
    data(){
        return {
            selected:null,
             book01:[]
            ,book02:[]
            , announcement:'',
            slides:[]
        }
    },
    created(){
      this.$http.get('/src/data.json').then(res=>{
       this.announcement  = res.body.announcement
          this.slides = res.body.slides
          this.book01 = res.body.book01
          this.book02 = res.body.book02
      })
    },
    methods:{
        preview(book) {
            this.selected= book
            this.$refs.dialog.open()
        }
    },

}
</script>
